<template>
	<view class="iptLogistics-view" :style="{height: screenHeight + 'px'}">
		<view class="order-item">
			<OrderDetilsItem :desc="item" v-if="Object.keys(item).length > 0"></OrderDetilsItem>
		</view>
		<view class="desc">
			<view class="title">
				{{$t("iptLogistics.hint1")}}：
			</view>
			<view class="addr-mobile">
				<view class="addr">
					{{$t("iptLogistics.addr")}}: {{companyAddr}}
				</view>
				<view class="mobile">
					{{companyPhone}}
				</view>
			</view>
		</view>
		<view class="exp-ipt">
			<view class="exp-ipt-desc">
			<text class="exp">{{$t("iptLogistics.exp")}}</text>
			</view>
			<input type="text" v-model="company" :placeholder="$t('iptLogistics.expPla')">
		</view>
		<view class="exp-ipt exp-ipt2">
			<view class="exp-ipt-desc">
			<text class="exp">{{$t("iptLogistics.expNum")}}</text>
			</view>
			<input type="text" v-model="num" :placeholder="$t('iptLogistics.expNumPla')">
		</view>
		
		<view class="img-list">
			<view class="img-item" v-if="imgList.length > 0" v-for="(item,index) in imgList" :key="item">
				<image :src="item" mode="aspectFit"></image>
				<view class="del" @click="delImg(index)" v-if="item">
					<u-icon name="close-circle-fill" size="28"></u-icon>
				</view>
			</view>
		</view>
		
		<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="1">
			<view class="upload-img" style="flex: 1;">
				{{$t("wishReleased.uploadPictures")}}
			</view>
		</u-upload>
		
		<view class="footer-btn" @click="putOrder">
			{{$t("iptLogistics.submit")}}
		</view>
		
		<MaskComp :fbShow="fbShow"></MaskComp>
		<PopupMsg v-if="fbShow" :top="top">
			<view slot="one">
				{{$t("iptLogistics.hint2")}}
			</view>
			<view slot="two">
				{{$t("iptLogistics.hint3")}}
			</view>
			<view slot="three">
				{{$t("iptLogistics.hint4")}}
			</view>
			<view slot="four">
				{{$t("iptLogistics.hint5")}}：15{{$t("iptLogistics.day")}}
			</view>
		</PopupMsg>
	</view>
</template>

<script>
	import OrderDetilsItem from "@/components/OrderDetilsItem/OrderDetilsItem.vue"
	import MaskComp from "@/components/MaskComp/MaskComp.vue"
	import PopupMsg from "@/components/PopupMsg/PopupMsg.vue"
	import { getUserAddr, updateOrder, getAboutUs } from "@/common/api.js"
	import { API_URL } from "@/env.js"
	
	export default {
		data() {
			return {
				item: {},
				fbShow: false,
				top: 0,
				screenHeight: 0,
				num: "",
				company: "",
				companyAddr: "",
				companyPhone: "",
				fileList1: [],
				imgList: [],
				imgNum: 0
			}
		},
		methods: {
			// 删除图片
			delImg(index) {
				this.imgList.splice(index, 1);
				this.imgNum--;
			},
			// 新增图片
			afterRead(event) {
				console.log(event.file);
				if(this.imgList.length >= 1) {
					uni.showToast({
						icon: 'none',
						title: this.$t("goodsReleased.oneImg"),
						duration: 1200
					})
					return
				}
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(lists.length);
				// this.imgNum += lists.length;
				for (let i = 0; i < lists.length; i++) {
					const result = this.uploadFilePromise(lists[i].url)
					result
					.then((res) => {
						console.log(res.msg);
						this.imgList.push(res.msg);
						this.queryParams.imgs.push(res.msg);
						this.imgNum++;
					})
					.catch((res) => {
						console.log(res);
					})
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					// let token = uni.getStorageSync('token')
					// console.log(token);
					let a = uni.uploadFile({
						url: API_URL + '/oss/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file', 
						timeout: 5000,
						header: {
							// 'Authorization': token
						},
						success: (res) => {
							console.log(res);
							const data = JSON.parse(res.data)
							resolve(data)
						},
						fail: (res) => {
							setTimeout(() => {
								console.log(res);
								reject(res)
							}, 1000)
						},
					});
				})
			},
			submitBtn() {
				const query = uni.createSelectorQuery()
				query.select('.iptLogistics-view').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec(res => {
					console.log(res[0].top);
				  this.top = res[0].top;
				  this.fbShow = true;
				});
			},
			fillScreen() {
				this.screenHeight = uni.getSystemInfoSync().windowHeight
			},
			async getCompanyAddr() {
				const res = await getUserAddr({id: 1});
				console.log(res);
			},
			async putOrder() {
				if(!this.num) {
					uni.showToast({
						icon: 'none',
						title: this.$t("sendGoodsDetail.hint1"),
						duration: 1200,
						mask: true
					})
					return;
				}
				
				if(!this.company) {
					uni.showToast({
						icon: 'none',
						title: this.$t("sendGoodsDetail.hint2"),
						duration: 1200,
						mask: true
					})
					return;
				}
				
				if(this.imgList.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: this.$t("sendGoodsDetail.hint3"),
						duration: 1200,
						mask: true
					})
					return;
				}
				
				const res = await updateOrder({expressCompany: this.company, expressNum: this.num, id: this.item.id, orderState: 8, orderStatus: 8, buyerPicture: this.imgList.join('')});
				console.log(res);
				if(res.code === 200) {
					uni.showToast({
						icon: 'success',
						title: this.$t("iptLogistics.sure"),
						duration: 1500
					})
					
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/myOrder/myOrder"
						})
					}, 1500)
				}
			},
			async initCompanyAddr() {
				const res = await getAboutUs();
				console.log(res);
				if(res.code === 200) {
					this.companyAddr = res.data.companyAddres;
					this.companyPhone = res.data.companyPhone;
				}
			}
		},
		components: {
			OrderDetilsItem,
			MaskComp,
			PopupMsg
		},
		onLoad(options) {
			if(options.item) {
				this.item = JSON.parse(decodeURIComponent(options.item));
			}
			this.initCompanyAddr();
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("iptLogistics.title")});
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.iptLogistics-view {
		background-color: #FBFBFB;
		padding: 0 24rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		height: 100%;
	}
	
	.img-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
		background-color: #FBFBFB;
	
		.img-item {
			position: relative;
	
			image {
				height: 386rpx;
				margin: 20rpx 0;
			}
	
			.del {
				position: absolute;
				right: 10rpx;
				top: 30rpx;
			}
		}
	}
	
	.u-upload {
		margin-top: 24rpx;
		background-color: #FBFBFB;
		width: 100%;
		position: relative;
	}
	
	.upload-img {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: #858585;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		background-color: #fff;
		border-radius: 10px;
		border: 1px solid rgba(128, 128, 128, 0.1);
		text-align: center;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 200rpx;
	}
	
	.order-item {
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #00000019;
		margin-top: 20rpx;
		height: 208rpx;
	}
	
	.desc {
		height: 220rpx;
		color: #858585;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		
		.title {
			height: 60rpx;
			padding-left: 20rpx;
		}
		
		.addr-mobile {
			border-radius: 20rpx;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
			padding: 10rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;
			
			.addr {
				width: 600rpx;
			}
			
			.mobile {
				margin-top: 20rpx;
			}
		}
	}
	
	.exp-ipt2 {
		margin-top: 80rpx;
	}
	
	.exp-ipt {
		display: flex;
		align-items: center;
		margin-left: 26rpx;
		margin-top: 40rpx;
		
		.exp-ipt-desc {
			width: 130rpx;
			text-align: center;
			font-size: 28rpx;
			
			.sym {
				color: #FF0000;
				font-size: 33rpx;
				font-weight: bold;
				font-family: PingFang SC;
			}
			.exp {
				margin-left: 15rpx;
				font-size: 26rpx;
				font-weight: bold;
				font-family: PingFang SC;
				
			}
		}
		
		input {
			margin-left: 20rpx;
			height: 80rpx;
			background-color: #fff;
			padding-left: 20rpx;
			border-radius: 10rpx;
			border: 2rpx solid #80808019;
			flex: 1;
			// margin-right: 26rpx;
		}
		
		input::placeholder {
			color: #D9D9D9;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
	
	.footer-btn {
		width: 100%;
		height: 112rpx;
		background-color: #000;
		text-align: center;
		color: #fff;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		line-height: 112rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>